
import { CaretRightOutlined } from "@ant-design/icons";
import { Button, Form, Space, Input, Select ,Modal} from "antd";

import useStartProcess from "@/hooks/StartProcessLogic.jsx";

const { TextArea } = Input;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

function StartProcess(props) {
  
  const {
    onClose,
    startProcess,
    onProcessDefSearch,
    processDefList,
    form
  } = useStartProcess(props);

  return (
    <div>
      <div style={{ background: "#eee", borderRadius: 5, paddingTop: 16 }}>
        <Form {...layout} form={form} style={{ width: 700 }}>
          <Form.Item
            name="procDefId"
            label="Process Defination"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              showSearch
              placeholder="Select a process Defination"
              onSearch={onProcessDefSearch}
              allowClear={true}
              notFoundContent={null}
              options={(processDefList || []).map((d) => ({
                value: d.value,
                label: d.text,
              }))}
            ></Select>
          </Form.Item>

          <Form.Item
            name="businessKey"
            label="Business Key"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="processVar"
            label="Process Variable"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea
              showCount
              style={{ height: 220 }}
              placeholder="can resize"
            />
          </Form.Item>
        </Form>
      </div>
      <div style={{ textAlign: "right" }}>
        <Space>
          <Button type="primary" onClick={startProcess}>
            Start Process
          </Button>
          <Button onClick={onClose}>Cancel</Button>
        </Space>
      </div>
    </div>
  );
}

export default StartProcess;
